<template>
  <div>
    <v-btn-toggle class="ma-1" v-model="filesButtonAction">
      <v-btn text color="primary" @click="getFiles"><font-awesome-icon :icon="['fa', 'redo']"/></v-btn>
      <v-btn :disabled="filesSelected.length <= 0" text @click="setFilesWantedAndUnwanted('files-wanted')" v-text="$t('components.files_information.download_selected_files')"></v-btn>
      <v-btn :disabled="filesSelected.length <= 0" text @click="setFilesWantedAndUnwanted('files-unwanted')" v-text="$t('components.files_information.ignore_selected_files')"></v-btn>
      <v-menu offset-y transition="slide-x-transition">
        <template v-slot:activator="{ on, attrs }">
          <v-btn :disabled="filesSelected.length <= 0" text v-bind="attrs" v-on="on" v-text="$t('components.files_information.set_priority')"></v-btn>
        </template>
        <v-list>
          <v-list-item @click="setFilesPriority('priority-high')">
            <v-list-item-title v-text="$t('components.files_information.priority_high')"></v-list-item-title>
          </v-list-item>
          <v-list-item @click="setFilesPriority('priority-normal')">
            <v-list-item-title v-text="$t('components.files_information.priority_normal')"></v-list-item-title>
          </v-list-item>
          <v-list-item @click="setFilesPriority('priority-low')">
            <v-list-item-title v-text="$t('components.files_information.priority_low')"></v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </v-btn-toggle>
    <v-treeview dense selectable transition hoverable :items="fileTree" return-object @input="selectInput">
      <template v-slot:prepend="{ item, open }">
        <font-awesome-icon v-if="item.type === 'directory'" :icon="['far', open ? 'folder-open' : 'folder']" size="lg" />
        <font-awesome-icon v-if="item.type === 'file'" :icon="['far', item.icon]" size="lg" />
      </template>
      <template v-slot:label="{ item }">
        <div class="d-flex justify-space-between align-center align-content-center">
          <div>
            <span>{{ item.name }}</span>
          </div>
          <div v-if="item.type === 'file'" style="width: calc(100vw/7);">
            <div class="d-flex flex-column">
              <v-progress-linear v-if="item.length > 0" height="18" :value="(item.bytesCompleted / item.length * 100).toFixed(2)" striped rounded color="#03a9f4">
                <template v-slot:default="{ value }">
                  <strong>{{ value }}%</strong>
                </template>
              </v-progress-linear>
            </div>
            <div class="d-flex flex-column">
              <div class="d-flex justify-space-between">
                <span v-if="item.priority === -1">
                  <font-awesome-icon :title="$t('components.files_information.priority') + $t('components.files_information.priority_high')" style="color: #ff5252" :icon="['fa', 'battery-quarter']"/>
                </span>
                <span v-if="item.priority === 0">
                  <font-awesome-icon :title="$t('components.files_information.priority') + $t('components.files_information.priority_normal')" style="color: #03A9F4" :icon="['fa', 'battery-half']"/>
                </span>
                <span v-if="item.priority === 1">
                  <font-awesome-icon :title="$t('components.files_information.priority') + $t('components.files_information.priority_low')" class="yes-color" :icon="['fa', 'battery-full']"/>
                </span>
                <span>
                  <small>{{ item.bytesCompleted | unitFormat }} / {{ item.length | unitFormat }}</small>
                </span>
                <span>
                  <font-awesome-icon :title="item.wanted? $t('yes'): $t('no')" :class="item.wanted? 'yes-color': 'no-color'" :icon="['fa', 'cloud-download-alt']"/>
                </span>
              </div>
            </div>
          </div>
        </div>
      </template>
    </v-treeview>
  </div>
</template>

<script>
export default {
  name: 'FilesInformation',
  props: {
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      filesList: [],
      filesButtonAction: null,
      filesSelected: [],
      fileExtList: [
        {
          icon: 'file-video',
          ext: ['.avi', '.mov', '.rmvb', '.rm', '.flv', '.mp4', '.3gp', '.mkv', '.wmv']
        },
        {
          icon: 'file-audio',
          ext: ['.mp3','.wav', '.flac']
        },
        {
          icon: 'file-image',
          ext: ['.bmp', '.jpg', '.png', '.tif', '.gif', '.pcx', '.tga', '.exif', '.fpx', '.svg', '.psd', '.cdr',
            '.pcd', '.dxf', '.ufo', '.eps', '.ai', '.raw', '.wmf', '.webp']
        }
      ],
    }
  },
  mounted() {
    this.getFiles()
  },
  computed: {
    fileTree() {
      return this.treeify(this.filesList)
    }
  },
  methods: {
    getFiles() {
      this.$axios.post('', {
        method: 'torrent-get',
        arguments: {
          id: this.id,
          fields: ['files', 'fileStats']
        }
      }).then(r => {
        if (r.data.result !== 'success' || r.data.arguments.torrents.length < 1) {
          return
        }
        let torrent = r.data.arguments.torrents[0]
        //files
        let fileStats = torrent.fileStats
        let files = torrent.files
        this.filesList = files.map((value, index) => {
          return {
            index: index,
            name: value.name,
            length: value.length,
            bytesCompleted: value.bytesCompleted,
            wanted: fileStats[index].wanted,
            priority: fileStats[index].priority,
          }
        })
      })
    },
    setFilesWantedAndUnwanted(value) {
      let args = {ids: this.id}
      if (value === 'files-wanted') {
        args['files-wanted'] = this.filesSelected
      }
      if (value === 'files-unwanted') {
        args['files-unwanted'] = this.filesSelected
      }
      this.$axios.post('', {
        method: 'torrent-set',
        arguments: args
      }).then(r => {
        if (r.data.result === 'success') {
          this.getFiles()
        }
      })
    },
    setFilesPriority(priority) {
      let args = { ids: this.id }
      if (priority === 'priority-normal') {
        args['priority-normal'] = this.filesSelected
      }
      if (priority === 'priority-high') {
        args['priority-high'] = this.filesSelected
      }
      if (priority === 'priority-low') {
        args['priority-low'] = this.filesSelected
      }
      this.$axios.post('', {
        method: 'torrent-set',
        arguments: args
      })
      this.getFiles()
    },
    /**
     * Copy From https://github.com/WDaan/VueTorrent
     * @param paths
     * @returns {[]}
     */
    treeify(paths) {
      let result = []
      const level = { result }
      let id = 0
      paths.forEach(path => {
        path.name.split('/').reduce((r, name) => {
          if (!r[name]) {
            r[name] = { result: [] }
            r.result.push({
              id: ++id,
              index: path.index,
              name: name,
              fullName: path.name,
              type: 'file',
              length: path.length,
              bytesCompleted: path.bytesCompleted,
              wanted: path.wanted,
              priority: path.priority,
              children: r[name].result,
              icon: this.fileIcon(path.name)
            })
          }
          return r[name]
        }, level)
      })
      result = result.map(el => this.parseFolder(el))
      return result
    },
    parseFolder(el) {
      if (el.children.length !== 0) {
        const folder = {
          id: el.id,
          name: el.name,
          fullName: el.name,
          type: 'directory',
          children: el.children
        }
        folder.children = folder.children.map(el => this.parseFolder(el))
        return folder
      }
      return el
    },
    selectInput(e) {
      this.filesSelected = e.map(v => v.index)
    },
    fileIcon(fileName) {
      let index = fileName.lastIndexOf('.')
      if (index < 0) {
        return 'file'
      }
      let ext = fileName.substr(index)
      let i = this.fileExtList.findIndex(v => {
        return v.ext.findIndex(v => v === ext) >= 0
      })
      return i >= 0 ? this.fileExtList[i].icon : 'file'
    }
  }
}
</script>

<style scoped>

</style>
